<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">审核消息列表</h1>

    <el-divider content-position="left"></el-divider>

    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 19px; color: #615f5f">退款处理表</h1>

    <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="120" />
      <el-table-column prop="message" label="客户反馈" width="180" />
      <el-table-column prop="status" label="订单状态" width="180">
        <template #default="scope">
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)<0)" type="danger">已退款订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)>=5)" type="warning">正在退款订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===4)" type="success">已完成订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===3)" type="info">待评价订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===1)" type="info">待完成订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===2)" type="primary">待送达订单</el-text>
          <el-text class="mx-1" :hidden="!(getStatus(scope.$index)===0)" type="warning">待付款订单</el-text>
        </template>
        <!-- 之后添加是否审核 -->
      </el-table-column>
      <el-table-column prop="orderTime" label="订单创建时间" width="180"/>
      <el-table-column prop="amount" label="金额" width="180" />
      <el-table-column prop="phone" label="收货人联系电话" width="180" />
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-button
              link
              type="primary"
              size="large"
              @click.prevent="detail(scope.$index)"
          >
            详情
          </el-button>
          <el-button
              link
              type="primary"
              size="large"
              @click.prevent="accept(scope.$index)"
          >
            同意退款
          </el-button>
          <el-button
              link
              type="primary"
              size="large"
              @click.prevent="refuse(scope.$index)"
          >
            拒绝退款
          </el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-divider content-position="left"></el-divider>

<!--    <h1 :style="`font-size: var(&#45;&#45;el-font-size-extra-large)`" style="font-size: 19px; color: #615f5f">商家信息审核表</h1>-->

<!--    <el-divider content-position="left"></el-divider>-->


  </el-card>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {acceptRefund, listRefund, refuseRefund} from "@/api/message";
import {open_error, open_success} from "@/utils/common";

const tableData = ref([]);

// 获取订单的状态
const getStatus = (index) => {
  return tableData.value[index].status;
}


// 同意退款
const accept = (index) => {
  const item = reactive(tableData.value[index]);
  console.log(item);
  acceptRefund({
    id: item.id
  }).then((res) => {
    if(res.state === 0) {
      open_success("成功");
    } else {
      open_error(res.message);
    }
    list();
  })
}

// 拒绝退款
const refuse = (index) => {
  const item = reactive(tableData.value[index]);
  console.log(item);
  refuseRefund({
    id: item.id
  }).then((res) => {
    if(res.state === 0) {
      open_success("成功");
    } else {
      open_error(res.message);
    }
    list();
  })
}

const list = () => {
  tableData.value = [];
  listRefund().then((res) => {
    for(let item in res.data) {
      const valueItem = res.data[item];
      console.log(valueItem);
      const v = {};
      v.id = valueItem.refund.refundId;
      v.status = valueItem.order.status;
      v.message = valueItem.refund.message;
      v.orderTime = valueItem.order.orderTime;
      v.amount = valueItem.order.amount;
      v.phone = valueItem.order.phone;
      tableData.value[item] = v;
    }
    console.log(tableData.value);
  });
}

onMounted(() => {
  list();
})

// 进入详情页查看详细信息
const   detail = (index) => {
  const item = reactive(tableData.value[index]);
  router.push({
    name: 'ordersDetail',
    params: {
      id: item.id,
    }});
}



</script>
<style scoped>
.course {
  font-weight: bold;
  display: inline-block;
}
.course li {
  line-height: 36px;
  color: #409eff;
  cursor: pointer;
}
</style>